<template>
  <div class="cshj-middle">
    <div class="left-wrappar">
      <cshj-header left-title="客服在线" right-title="Service"></cshj-header>

      <div class="btn-wrappar" :style="{backgroundImage:'url('+require('../../assets/bg.gif')+')'}">
        <img src="http://cshj180.oss-cn-shenzhen.aliyuncs.com/1111.jpg" style="width: 140px; height: 140px"/>

        <div>
          <cshj-button
            v-for="(item, index) in btnlist"
            :position="{type: '2', index: index}"
            :icon="item.icon"
            :title="item.title"
            :key="index"></cshj-button>
        </div>
      </div>
    </div>

    <div class="right-wrappar">
      <div class="top">
        <div class="middle-wrappar">
          <cshj-header left-title="更多下载" right-title="More"></cshj-header>

          <div class="arrow-wrappar">
            <el-carousel ref="carousel" indicator-position="none" :interval="4000" arrow="never" height="342px" class="swiper">
              <el-carousel-item v-for="(item, index) in imgs" :key="index">
                <div class="img-shot">
                  <img v-for="(i, n) in item" :src="i" :key="n"/>
                </div>
              </el-carousel-item>
            </el-carousel>

            <div class="arrow-left" @click="handleSwipe(0)">
              <img :src="arrow" style="width: 16px; height: 25px"/>
            </div>
            <div class="arrow-right" @click="handleSwipe(1)">
              <img :src="arrow1" style="width: 16px; height: 25px"/>
            </div>
          </div>
        </div>

        <div class="right-wrappar">
          <cshj-header left-title="防劫持" right-title="Avoid Hijack"></cshj-header>
          <hijack style="width: 100%; height: 342px;"></hijack>
        </div>
      </div>

      <div class="bottom">
        <cshj-header left-title="游戏截图" right-title="Screenshots"></cshj-header>

        <el-carousel indicator-position="none" :interval="4500" type="card" arrow="never" height="200px">
          <el-carousel-item v-for="(item, index) in maps" :key="index">
            <img :src="item" style="width: 100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import CshjHeader from '../../components/Header/index'
import CshjButton from '../../components/Button/index'
import img1 from '../../assets/001.png'
import img2 from '../../assets/002.png'
import img3 from '../../assets/003.png'
import img4 from '../../assets/004.png'
import img5 from '../../assets/005.png'
import img6 from '../../assets/006.png'
import img7 from '../../assets/007.png'
import img8 from '../../assets/008.png'
import img9 from '../../assets/009.png'
import map1 from '../../assets/map1.jpg'
import map2 from '../../assets/map2.jpg'
import map3 from '../../assets/map3.jpg'
import map4 from '../../assets/map4.jpg'
import map5 from '../../assets/map5.jpg'
import map6 from '../../assets/map6.jpg'
import map7 from '../../assets/map7.jpg'
import map8 from '../../assets/map8.jpg'
import map from '../../assets/map.jpg'
import arrow from '../../assets/11.png'
import arrow1 from '../../assets/2.png'
import arrow2 from '../../assets/3.png'
import arrow3 from '../../assets/4.png'
import Hijack from '../../components/Hijack/index'

export default {
  name: 'Middle',
  components: { Hijack, CshjButton, CshjHeader },
  data () {
    return {
      btnlist: [
        { url: '', icon: 'iconfont icon-qq', title: '咨询客服' },
        { url: '', icon: 'iconfont icon-qq', title: '值班技术' },
        { url: '', icon: 'iconfont icon-qq', title: '担保客服' },
        { url: '', icon: 'iconfont icon-qq', title: '创世交流群' }
      ],
      activeName: 'second',
      titles: ['战士', '法师', '道士'],
      imgs: [[img1, img2, img3], [img4, img5, img6], [img7, img9, img8]],
      maps: [map, map1, map2, map3, map4, map5, map6, map7, map8],
      arrow,
      arrow1,
      arrow2,
      arrow3
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // handleTap (index) {
    //   if (index === 0) {
    //     this.img = zypic
    //   } else if (index === 1) {
    //     this.img = zypic2
    //   } else {
    //     this.img = zypic1
    //   }
    // },
    handleSwipe (index) {
      if (index === 0) {
        this.$refs.carousel.prev()
      } else {
        this.$refs.carousel.next()
      }
    }
  }
}
</script>

<style lang="scss">
  .bottom {
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    .el-carousel__arrow--left {
      background: $font-color !important;
      font-size: 30px !important;
    }
  }
</style>

<style lang="scss">
  .cshj-middle {
    .el-tabs__item {
      color: #3f828b;
      .is-active {
        color: #a9f0f6;
      }
      &:hover {
        color: #a9f0f6
      }
    }
    .el-tabs__active-bar {
      background-color: #a9f0f6
    }
    .el-tabs__item {
      font-size: 16px;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
<style scoped lang="scss">
  .cshj-middle {
    display: flex;
    justify-content: space-between;
    .left-wrappar {
      width: 154px;
      .btn-wrappar {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
        padding-top: 20px;
      }
    }
    .right-wrappar {
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        .middle-wrappar {
          height: 392px;
          margin-right: 20px;
          .swiper {
            background-color: $bg-color;
            color: #fff;
            width: 745px;
            .img-shot {
              padding: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
        .right-wrappar {
          height: 392px;
          width: 364px;
          position: relative;
          .btn {
            position: absolute;
            left: 30px;
            top: 70px;
            width: 40px;
            height: 100px;
            div {
              width: 56px;
              height: 23px;
              line-height: 23px;
              text-align: center;
              font-size: 16px;
              color: #fff;
              margin-bottom: 8px;
              border: 2px solid $font-color;
              border-radius: 12px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .arrow-wrappar {
      position: relative;
      .arrow-left {
        cursor: pointer;
        position: absolute;
        left: 10px;
        bottom: 135px;
        height: 50px;
        width: 50px;
        z-index: 999;
      }
      .arrow-right {
        cursor: pointer;
        position: absolute;
        right: -24px;
        bottom: 135px;
        height: 50px;
        width: 50px;
        z-index: 999;
      }
    }
  }
</style>
